<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./_style.css" />
    <title>极简旅游网站首页布局</title>
  </head>
  <body>
    <div class="container">
      <!-- 1.导航栏 -->
      <div class="navbar">
        <img src="./img/logo.png" class="logo" />
        <nav>
          <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">REGION</a></li>
            <li><a href="#">ABOUT</a></li>
          </ul>
        </nav>
        <img src="./img/menu.png" class="menu-icon" />
      </div>
      <!-- 2.主体 -->
      <div class="row">
        <!-- 3.1 文字展示 -->
        <div class="col">
          <h1>Sahara</h1>
          <p>
            Until 2020, no other member state of the United Nations had ever officially recognized Moroccan sovereignty over parts of Western Sahara.[14][15][16] In 2020, the United States recognized Moroccan sovereignty over Western Sahara in exchange for Moroccan normalization of relations with
            Israel.
          </p>
          <button type="button">Explore</button>
        </div>
        <!-- 3.2 图片展示 -->
        <div class="col">
          <div class="card1 card">
            <h5>Western Desert</h5>
            <p>no other member state of the United Nations had ever officially recognized</p>
          </div>
          <div class="card2 card">
            <h5>AI Bagawat</h5>
            <p>no other member state of the United Nations had ever officially recognized</p>
          </div>
          <div class="card3 card">
            <h5>Pyramid of Giza</h5>
            <p>no other member state of the United Nations had ever officially recognized</p>
          </div>
          <div class="card4 card">
            <h5>Kalahari Desert</h5>
            <p>no other member state of the United Nations had ever officially recognized</p>
          </div>

        </div>
      </div>
    </div>
  </body>
</html>
